<template>
  <div class="container">
    <div class="box" v-if="completeStatus">
      <p class="box_top">
        <span style="">找回密码</span>
        <span @click="toBack()">返回登录页</span>
      </p>
      <a-form-model ref="form" :model="form" :rules="rules" v-if="passwordStatus">
        <a-form-model-item required prop="phone">
          <a-input v-model="form.phone" size="large" type="text" placeholder="手机号">
            <a-icon slot="prefix" type="mobile" :style="{ color: '#022EA0' }"/>
          </a-input>
        </a-form-model-item>
        <a-form-model-item required prop="captcha">
          <a-input v-model="form.captcha" size="large" style="max-width: 230px;" type="text" placeholder="验证码" autocomplete="off">
            <a-icon slot="prefix" type="mail" :style="{ color: '#022EA0' }"/>
          </a-input>
          <a-button type="primary" @click="send" size="large" style="margin-left:20px;" :disabled="disabledCodeBtn">{{codeText}}</a-button>
        </a-form-model-item>
        <a-form-item style="margin-top: 50px;">
          <a-button size="large" type="primary" class="login-button" @click="toNext">下一步</a-button>
        </a-form-item>
      </a-form-model >
      <a-form-model ref="ruleForm" :model="ruleForm" :rules="rule" v-if="!passwordStatus">
        <a-form-model-item prop="password">
          <a-input-password v-model="ruleForm.password" size="large" allow-clear placeholder="设置密码" :type="inputType" :autoComplete="autoCom" @change="changeInputType"></a-input-password>
        </a-form-model-item>
        <a-form-model-item prop="surePassword">
          <a-input-password v-model="ruleForm.surePassword" size="large" allow-clear placeholder="确认密码" :type="inputType" :autoComplete="autoCom" @change="changeInputType"></a-input-password>
        </a-form-model-item>
        <a-form-item style="margin-top: 50px;">
          <a-button size="large" type="primary" class="login-button" @click="sure">下一步</a-button>
        </a-form-item>
      </a-form-model>
    </div>
    <div class="box" v-if="!completeStatus">
      <a-result
        status="success"
        title="密码修改成功!"
        sub-title="您可以通过用户名+密码进行重新登录"
      >
      </a-result>
      <a-form-item style="margin-top: 50px;">
        <a-button size="large" type="primary" class="login-button" @click="toBack()">完成</a-button>
      </a-form-item>
    </div>
  </div>
</template>

<script>
import { phoneToken,phoneFindPwd } from '@api/login'
import { getAction } from '@/api/manage'
import { cloneObject, encryptIt } from '@/utils/util'
export default {
  name: 'forgetPassword',
  data(){
    return{
      my:null,
      myTest:'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCs7eVl3hduxnpyKhwI27seelA6cfr0ghTFVsMuaFW68KDa0Xv3NANEQ1YjWYVM/AUllHSDq0ORdIGm2suKCsmGuLnDK1TK7LbOZLgvkDz+Ft+06Y0ZzjILzl0SUtawE+fD6dpebAeD+dOAcl9EzU536ASLx0rsziOZIwcN3aWx5wIDAQAB',
      myPro:'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDpIyqMNYBRzfwVhL+P6jav7rGkNZQ0nu+7G7qe1g7mThM9D6Dc717sN1ATDgPxJzgI+NEQ+wx2B1HpUcs4pigyXbnL96qgHrsTe6ZX9YyicsaLz5FM7nujypfVAkfr/VQLEA8z9L7XsAh+Hm6g0WCdSPqdWHY0lS0ImOXth3PgjwIDAQAB',
      form: {
        phone: '',
        captcha: ''
      },
      codeText: '获取验证码',
      disabledCodeBtn: false,
      rules:{
        phone: [
          { required: true, message: '请输入手机号码!' },
          { validator: this.validatePhone }
        ],
        captcha: [
          { required: true, message: '请输入验证码!' },
          { validator: this.validateEn }
        ]
      },
      passwordStatus: true,
      completeStatus: true,
      ruleForm: {
        password: '',
        surePassword: ''
      },
      passwordToken: null,
      rule: {
        password: [
          { required: true, message: '请设置新密码!' },
          { validator: this.validateNewPassword }
        ],
        surePassword: [
          { required: true, message: '请再次输入密码!' },
          { validator: this.validateNewPassword2 }
        ]
      },

      inputType:'text',
      autoCom: 'off',
    }
  },
  methods: {
    // 校验手机号
    validatePhone(rule,value,callback){
      let reg = /^(1\d{10})$/;
      if (!value || reg.test(value)){
        callback();
      }else{
        callback("您的手机号码格式不正确!");
      }
    },
    //校验密码
    validateNewPassword(rule, value, callback){
      //密码
      let passwordReg = /^(?=.*[a-zA-Z])(?=.*\d).{9,15}$/;
      if (value){
        if (!passwordReg.test(value)){
          callback(new Error("密码由9~15位数字和字母组成!"));
        }else{
          callback();
        }
      }
    },
    validateNewPassword2(rule, value, callback){
      if (value !== this.ruleForm.password) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback();
      }
    },
    //校验验证码
    validateEn(rule, value, callback){
      let reg = /^[0-9]+$/
      // 长度为6到18个字符
      if (value !== '' && !reg.test(value)) {
        callback('验证码格式不正确,只能为纯数字!')
      } else if (value !== '' && value.length != 6) {
        callback('长度为6位纯数字!')
      } else {
        callback()
      }
    },
    //密码不自动带入浏览器保存
    changeInputType(e){
      if(e.target.value !=''){
        this.inputType = 'password'
        this.autoCom = 'new-password'
      }else{
        this.inputType = 'text'
        this.autoCom = 'off'
      }
    },
    //发送验证码
    send(){
      this.$refs['form'].validateField(['phone'], (Error) => {
          if (!Error){
            //请求接口
            let params = {};
            params.transCode='1001';
            params.phone= this.form.phone;
            getAction("/cloud/third/sms/sendSMSCode",params).then(res => {
              if (res.success) {
                this.$message.success(res.result);
                this.countDown(60);
              }else{
                this.$message.warning(res.message)
              }
            })
          }
      })
    },
    //确定下一步
    toNext(){
      this.$refs.form.validate(valid => {
        if (valid) {
          let params = {};
          params.captcha = this.form.captcha;
          params.phone = this.form.phone;
          phoneToken(params).then(res => {
            if (res.success){
              this.passwordToken = res.result;
              this.passwordStatus = false;
            }else{
              this.$message.warning(res.message);
            }
          })
        }
      })
    },
    sure(){
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let params = {};
          params.token = this.passwordToken;
          params.password = cloneObject(this.ruleForm.password);
          params.passwordOk = cloneObject(this.ruleForm.surePassword);
          if(process.env.VUE_APP_MY_STR == 'test'){
            this.my = this.myTest
          }else if(process.env.VUE_APP_MY_STR == 'pro'){
            this.my = this.myPro
          }
          params.password = encryptIt(this.my,params.password)
          params.passwordOk = encryptIt(this.my,params.passwordOk)
          phoneFindPwd(params).then(res => {
            if (res.success){
              this.completeStatus = false;
            }else{
              this.$message.warning(res.message);
            }
          })
        }
      })
    },
    //返回登录，完成
    toBack(){
      // this.$route.back = true;
      this.$emit('showBack');
    },
    // 倒计时方法
    countDown(time) {
      if (time === 0) {
        this.disabledCodeBtn = false;
        this.codeText = "重新获取";
        return;
      } else {
        this.disabledCodeBtn = true;
        this.codeText = "再次获取" + time + "s";
        time--;
      }
      setTimeout(() => {
        this.countDown(time);
      }, 1000);
    },
  }
}
</script>

<style scoped lang="less">
.container{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .box{
    width: 365px;
    .box_top{
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      span:nth-child(1){
        color: #666666;
        font-size: 24px;
      }
      span:nth-child(2){
        color: #666666;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
}

//忘记密码
/deep/.ant-form-item-children{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/deep/.ant-form-explain{
  text-align: left;
  margin-top: 2px;
}
.getCaptcha {
  display: block;
  height: 40px;
  background: #022EA0;
  border: none;
  color: #FFFFFF;
}


button.login-button {
  padding: 0 15px;
  font-size: 16px;
  height: 40px;
  width: 100%;
}

//完成结果
/deep/.ant-result-success .ant-result-icon > .anticon{
  color: #022EA0;
}
/deep/.ant-result-title,/deep/.ant-result-subtitle{
  color: #022EA0;
}


/deep/.ant-form .ant-form-horizontal .ant-form-item{
  margin-bottom: 0;
  min-height: 65px;
}
</style>
